import type { FunctionalComponent } from 'vue'
import type { ViewTableColumn as ViewTableColumnProps } from './type.d'
import { ElTableColumn } from 'element-plus'
import { omit } from 'lodash-es'
// import { omit } from 'lodash-es';
import RenderComponent from '../RenderComponent/RenderComponent.vue'

const hideTooltip = ['eltag', 'elswitch']
export const ViewTableColumn: FunctionalComponent<
  ViewTableColumnProps
> = (props) => {
  // const isHide = (
  //   props: ViewTableColumnProps,
  //   scoped: any
  // ) => {
  //   const name = props.render?.({
  //     row: scoped.row,
  //     column: scoped.column,
  //     index: scoped.$index
  //   })?.type?.name;
  //   return !hideTooltip?.includes(name);
  // };
  const renderCom1 = () => (
    <ElTableColumn
      {...omit(
        props,
        'children',
        'render',
        'header',
        'hidden',
      )}
      v-slots={{
        header:
          props?.header
          && ((scoped: any) => (
            <RenderComponent
              render={props?.header}
              row={null}
              column={scoped.column}
              index={scoped.$index}
            />
          )),
      }}
    >
      {...props.children!.map(item => (
        <ViewTableColumn {...item} />
      ))}
    </ElTableColumn>
  )
  const renderCom2 = () => (
    <ElTableColumn
      {...omit(
        props,
        'children',
        'render',
        'header',
        'hidden',
      )}
      showOverflowTooltip={!Reflect.has(props, 'type')}
    >
      {{
        default:
          props?.render
          && ((scoped: any) => (
            <RenderComponent
              render={props?.render}
              row={scoped.row}
              column={scoped.column}
              index={scoped.$index}
            />
          )),
        header:
          props?.header
          && ((scoped: any) => (
            <RenderComponent
              render={props?.header}
              row={null}
              column={scoped.column}
              index={scoped.$index}
            />
          )),
      }}
    </ElTableColumn>
  )
  return (
    <>
      {props.children && props.children.length > 0
        ? renderCom1()
        : renderCom2()}
    </>
  )
}
